import { Ref, ref, watch } from 'vue';

/**
 * 使用基本的bimface来预览模型
 * @param modelid 模型id，即bimface中的modelid（前提是该模型已上传Bimface服务器并且进行了轻量化）。
 * @param api 获取bimface View Token 的接口
 * @returns {Object} 包含以下属性的对象：
 * - elementid: 元素id，需要将它绑定到指定的div标签，作为该标签的id属性
 * - viewer3D: Bimface自带，或许你需要使用
 * - app: Bimface自带，或许你需要使用
 * - drawable: Bimface自带，或许你需要使用
 * - model3D: Bimface自带，或许你需要使用
 * - resize: 调整窗口大小
 * @example 1. 在Vue文件中使用，示例代码如下：
 * ```vue
 * <template>
 * <div>
 *  <div :id="elementid"></div>
 * </div>
 * </template>
 * <script setup lang="ts">
 * import { ref } from 'vue';
 * import { useBasicModel } from '@/hooks/bimface';
 * import { getModelViewToken } from '@/api/bimface/accessCredentials';
 * const modelid = ref<string | null>('123')
 * const { elementid } = useBasicModel(modelid, getModelViewToken)
 * </script>
 * ```
 * @example 2. 在Hook中使用,参考[进度模拟Hook](src/hooks/bimface/useProgress.ts)
 */
export function useBasicModel(modelid: Ref<string | null>, api: Function): {
  elementid: string;
  viewer3D: Ref<any>;
  app: Ref<any>;
  drawable: Ref<any>;
  model3D: Ref<any>;
  resize: () => void;
} {

  let viewer3D = ref();
  let app = ref();
  let viewToken = '';
  let drawable = ref();
  let model3D = ref();

  const elementid = `bfps-${Math.random().toString(36)}`;

  // 监听模型id是否发生改变，若改变则销毁之前的模型，然后再创建新模型。
  watch(
    () => modelid,
    (newValue) => {
      if (newValue) {
        destroyApp();
        loadBimface();
      }
    },
    { immediate: true, deep: true },
  );

  // 调整窗口长宽
  function resize() {
    viewer3D.value.resize(
      document.documentElement.clientWidth,
      document.documentElement.clientHeight - 40,
    );
  }

  // 渲染成功回调
  function successCallback(viewMetaData) {
    if (viewMetaData.viewType == '3DView') {
      // 判断是否为3D模型
      // 获取DOM元素
      const webAppConfig = new window.Glodon.Bimface.Application.WebApplication3DConfig();
      const domShow = document.getElementById(elementid);
      webAppConfig.domElement = domShow;

      // 设置全局单位
      webAppConfig.globalUnit = window.Glodon.Bimface.Common.Units.LengthUnits.Millimeter;

      // 设置 ui 
      // https://bimface.com/docs/model-viewer/v1/api-reference/Glodon.Bimface.Application.WebApplication3DConfig.html
      // 1.button的值
      webAppConfig.Buttons = []
      // 2.左上角树型组件
      // webAppConfig.Toolbars=[]

      // 2.运行模式
      webAppConfig.effectMode = "fluency"
      
      // 3.设置右上角的骰子
      // https://bimface.com/docs/model-viewer/v1/api-reference/Glodon.Bimface.Viewer.Viewer3DConfig.html
      webAppConfig.enableViewHouse = false
      // 4.取消天空盒
      // webAppConfig.enableSkyBox = false
      // webAppConfig.enableToggleContextMenuDisplay=true

      // // 4.设置背景背景
      // webAppConfig.backgroundColor = [{
      //   color: new window.Glodon.Web.Graphics.Color(25, 28, 33, 1)
      // }]
      
      
     
      // 创建WebApplication
      app.value = new window.Glodon.Bimface.Application.WebApplication3D(webAppConfig);
      console.log("zptest:",app.value.getViewer())
      // 添加待显示的模型
      app.value.addView(viewToken);
      // 从WebApplication获取viewer3D对象
      viewer3D.value = app.value.getViewer();


      // feature1: 设置相机位置
      let cameraState = {
        "name":"persp",
        "position":{
          "x": 438234.1310180214,
          "y": -155202.79759646222,
          "z": 145060.75410098155
      },
        "target":{
          "x": 681281.9375708819,
          "y": 87845.47780185359,
          "z": 17421.865765899973
      },
       up:{
        "x": 0.24615725369566935,
        "y": 0.2461538102468012,
        "z": 0.9374512830830133
    },
        "fov":90
      };
      function setCameraStatus() {
        // position：相机位置，即相机镜头所在空间坐标点，采用世界坐标系
        // target：目标点位置，即相机捕捉场景目标点所在空间坐标点，采用世界坐标系
        // up：相机上方朝向，表示相机姿态的空间向量，与主视线方向（即position-target向量）垂直 (默认为z-up)
        // fov：视角范围，单位为角度，通常取值在60-90°之间
        // aspect：视野角度的宽高比
        // near：最近可视距离
        // far：最远可视距离
        // zoom：图像缩放比
        //  viewer3D.value.getCameraStatus();
        viewer3D.value.setCameraStatus(cameraState);
        // console.log("zptest:viewer3D.value",viewer3D.value)
      }
      setTimeout(() => {
        setCameraStatus()
        console.log("camera")
      }, 1500);
      
      // feature2: 选中模型
      function getData(data) {
        //获取构件属性
        console.log("zptest:",data);
      }
      function setClickListener() {
        // 第二个是触发的东西
        viewer3D.value.addEventListener(window.Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, getData);
      }
      setClickListener()
// 5 5(1)
// 2 2 2 2 (2,3)
// 4
// 1 1 1 1 1 1 1 2 1 1 1
// 1 1 1 1 | 1 2 1 1 | 1 1 1 (1)
// 1 1 | 1 1  (2)
// 1 1 (3)
// 最后一次比较全部比较完
      // feature3: 移动到某一个构件
      // function setZoomToComponents() {
      //   viewer3D.value.getModel().clearSelectedComponents();
      //   viewer3D.value.getModel().setSelectedComponentsById(["2147088"]);
      //   viewer3D.value.getModel().zoomToSelectedComponents();
      // }
      // setTimeout(() => {
      //   setZoomToComponents()
      // }, 3000);
      
      // viewer3D.value.getModel(modelId);
      // viewer3D.value.getModel(modelId).addBlinkComponentsById

      // viewer3D.value.Viewer3D(Viewer3DConfig)
     
      viewer3D.value.backgroundColor = []

      let drawableConfig = new window.Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
      drawableConfig.viewer = viewer3D.value;
      drawableConfig.maxNum = 10;
      drawable.value = new window.Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
      // 监听添加view完成的时间

      viewer3D.value.addEventListener(window.Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, () => {
        // 调用viewer3D对象的Method，可以继续扩展功能
        //自适应屏幕大小

        window.addEventListener('resize', () => {
          resize();
        });
        // 从viewer3D对象中获取模型对象model3D
        model3D.value = viewer3D.value.getModel();
        let bgColor = new window.Glodon.Web.Graphics.Color(8, 12, 20, 1); // viewer3D.setBackgroundColor(bgColor);
        // 渲染3D模型
        viewer3D.value.render();
      });
    }
  }

  // 渲染失败回调
  function failureCallback(error) {
    console.log(error);
  }

  function loadBimface() {
    if (!modelid.value) {
      return;
    }

    api(modelid.value)
      .then((res) => {
        viewToken = res.data;

        // 初始化显示组件
        const loaderConfig = new window.BimfaceSDKLoaderConfig();
        loaderConfig.language= "en_GB"
        loaderConfig.viewToken = viewToken;
        window.BimfaceSDKLoader.load(
          loaderConfig,
          successCallback,
          failureCallback,
        );
      })
      .catch((error) => {
        console.error(error);
        // console.log("zptest:",api)
      });
  }

  // 销毁app
  function destroyApp() {
    if (app.value) {
      app.value.destroy();
    }
  }

  return { 
    elementid, 
    viewer3D, 
    app, 
    drawable, 
    model3D, 
    resize 
  };
}
